﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="KPIAddPage.aspx.cs" Inherits="FBKPI.Pages.KPIAddPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var oTable;
        var iTableCounter = 1;
        var oInnerTable;
        var TableHtml;
        var ParentID;
        $(document).ready(function () {
            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");

            $("#divdetail").hide();
            $("#divdetail").dialog({
                title: '<span class="header-text">KPI Form</span>',
                autoOpen: false,
                width: 1000,
                height: 500,
                modal: true,
                resizable: false
            });

            $("#divdetailMethod").hide();
            $("#divdetailMethod").dialog({
                title: '<span class="header-text">Method KPI Form</span>',
                autoOpen: false,
                width: 1000,
                height: 570,
                modal: true,
                resizable: false
            });

            $("#divdetailAssign").hide();
            $("#divdetailAssign").dialog({
                title: '<span class="header-text">Assign KPI Form</span>',
                autoOpen: false,
                width: 600,
                height: 500,
                modal: true,
                resizable: false
            });

            //datatable section
            oTable = $("#KPITable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val() + "&method=AddKPI",
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
            {
                "mData": "ID3"
            },
            {
                "mData": "ID2"
            },
            {
                "mData": "ID"
            }, {
                "mData": "No"
            }, {
                "mData": "Description"
            },


             {
                 "mData": "GroupKPI"
             }, {
                 "mData": "CategoryKPI"
             }, {
                 "mData": "TypeKPI"
             }, {
                 "mData": "SubTypeKPI"
             },
            {
                "mData": "Periode"
            },

            {
                "mData": "Method"
            },

            {
                "mData": "MethodID"
            },

             {
                 "mData": "Weight"
             },

            {
                "mData": "UoMMax"
            },
            {
                "mData": "UoMMin"
            },

            {
                "mData": "Status"
            }
            ,
            {
                "mData": "isActive"
            }
            ],
                "fnDrawCallback": function (oSettings) {
                    if (oSettings.aiDisplay.length == 0) {
                        return;
                    }

                    var nTrs = $('#KPITable tbody tr');
                    var iColspan = nTrs[0].getElementsByTagName('td').length;
                    var sLastGroupKPIGroup = "";
                    var sLastGroupKPICategory = "";
                    var sLastGroupKPIType = "";
                    var sLastGroupKPISubType = "";

                    var cleansegroup1 = "";
                    var cleansegroup2 = "";
                    var cleansegroup3 = "";
                    var cleansegroup4 = "";

                    var index1 = "";
                    var index2 = "";
                    var index3 = "";
                    var index4 = "";

                    for (var i = 0; i < nTrs.length; i++) {
                        var iDisplayIndex = oSettings._iDisplayStart + i;
                        var sGroupKPIGroup = oSettings.aoData[oSettings.aiDisplay[i]]._aData.GroupKPI;
                        var sGroupKPICategory = oSettings.aoData[oSettings.aiDisplay[i]]._aData.CategoryKPI;
                        var sGroupKPIType = oSettings.aoData[oSettings.aiDisplay[i]]._aData.TypeKPI;
                        var sGroupKPISubType = oSettings.aoData[oSettings.aiDisplay[i]]._aData.SubTypeKPI;

                        if (sGroupKPIGroup != sLastGroupKPIGroup) {
                            var nGroupKPIGroup = document.createElement('tr');
                            var nCellKPIGroup = document.createElement('td');

                            index1 = index1 + 1;
                            index2 = 0;
                            index3 = 0;
                            index4 = 0;

                            nCellKPIGroup.colSpan = iColspan;
                            nCellKPIGroup.className = "group index1" + index1;
                            nCellKPIGroup.innerHTML = '<b>' + sGroupKPIGroup + '</b>';
                            nGroupKPIGroup.appendChild(nCellKPIGroup);
                            nTrs[i].parentNode.insertBefore(nGroupKPIGroup, nTrs[i]);
                            sLastGroupKPIGroup = sGroupKPIGroup;
                        }
                        if (sGroupKPICategory != sLastGroupKPICategory) {
                            var nGroupKPICategory = document.createElement('tr');
                            var nCellKPICategory = document.createElement('td');

                            index2 = index2 + 1;
                            index3 = 0;
                            index4 = 0;

                            nCellKPICategory.colSpan = iColspan;
                            nCellKPICategory.className = "group2 index1" + index1 + " index2" + index2;
                            nCellKPICategory.innerHTML = sGroupKPIGroup + ' > <b>' + sGroupKPICategory + '</b>';
                            nGroupKPICategory.appendChild(nCellKPICategory);
                            nTrs[i].parentNode.insertBefore(nGroupKPICategory, nTrs[i]);
                            sLastGroupKPICategory = sGroupKPICategory;
                        }
                        //alert(sGroupKPIType);
                        //alert(sLastGroupKPIType);
                        if (sGroupKPIType != sLastGroupKPIType) {
                            var nGroupKPIType = document.createElement('tr');
                            var nCellKPIType = document.createElement('td');

                            index3 = index3 + 1;
                            index4 = 0;

                            nCellKPIType.colSpan = iColspan;
                            nCellKPIType.className = "group3 index1" + index1 + " index2" + index2 + " index3" + index3;
                            nCellKPIType.innerHTML = sGroupKPIGroup + ' > ' + sGroupKPICategory + ' > <b>' + sGroupKPIType + '</b>';
                            nGroupKPIType.appendChild(nCellKPIType);
                            nTrs[i].parentNode.insertBefore(nGroupKPIType, nTrs[i]);
                            sLastGroupKPIType = sGroupKPIType;
                        }
                        //alert(sGroupKPISubType);
                        //alert(sLastGroupKPISubType);

                        if (sGroupKPISubType != sLastGroupKPISubType) {
                            var nGroupKPISubType = document.createElement('tr');
                            var nCellKPISubType = document.createElement('td');

                            index4 = index4 + 1;

                            nCellKPISubType.colSpan = iColspan;
                            nCellKPISubType.className = "group4 index1" + index1 + " index2" + index2 + " index3" + index3 + " index4" + index4;
                            nCellKPISubType.innerHTML = sGroupKPIGroup + ' > ' + sGroupKPICategory + ' > ' + sGroupKPIType + ' > <b>' + sGroupKPISubType + '</b>';
                            nGroupKPISubType.appendChild(nCellKPISubType);
                            nTrs[i].parentNode.insertBefore(nGroupKPISubType, nTrs[i]);
                            sLastGroupKPISubType = sGroupKPISubType;
                        }
                        $(nTrs[i]).addClass("group4 index1" + index1 + " index2" + index2 + " index3" + index3 + " index4" + index4);
                    }
                },
                "aaSortingFixed": [[7, 'asc']],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        //return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\">Edit</a>";
                        //return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\">Edit</a>&nbsp;/<a href=\"#\" onclick=\"OnDelete('" + oObj.aData["ID"] + "')\">Delete</a>";
                        return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "')\"><img src='../images/icon_edit.png' title='Edit Data' /></a>&nbsp;<a href=\"#\" onclick=\"OnDelete('" + oObj.aData["ID"] + "')\"><img src='../images/icon_delete.png' title='Delete Data' /></a>";
                    },
                    "aTargets": [1]
                },
            {
                "fnRender": function (oObj) {
                    return "<img src='../images/plus.gif' class='imagetree'/>";
                },
                "aTargets": [0]
            },
            {
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"OnAssignment('" + oObj.aData["ID"] + "')\">Assign</a>";
                },
                "aTargets": [2]
            },

            {
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"OnMethod('" + oObj.aData["MethodID"] + "','" + oObj.aData["Periode"] + "')\">" + oObj.aData["Method"] + "</a>";
                },
                "aTargets": [10]
            },

             {
                 "fnRender": function (oObj) {
                     if (oObj.aData["isActive"] == 'True') {
                         return "<img src='../images/check.png' />"
                     } else {
                         return "<img src='../images/cross.png' />"
                     }
                 },
                 "aTargets": [16]
             }, {
                 "sClass": "center",
                 "aTargets": [0, 1, 2, 3, 16]
             },
             {
                 "bVisible": false,
                 "aTargets": [5, 6, 7, 8, 11]
             }

             ]
            });

            //mark selected row
            $('body').on("click", '#KPITable tbody tr', function () {
                $('#KPITable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            $("#KPITable_length label").after('&nbsp;<button class="button add" id=\"btnAddNew\" style="right: 0px;" onclick=\'OnDetail(0);return false;\'>New Record</button>&nbsp;<button id=\"btnImportExcel\" style="right: 0px;" class="button" onclick=\'ImportExcel("kpi");return false;\'>Import</button>');

            //            $("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------

            $("#KPITable tbody tr td").live('click', function () {
                var group = ($(this).attr('class'));

                if (group.indexOf('group4') >= 0) {
                    var classes = group.toString().split(' ');
                    var idx1 = classes[1].replace('index1', '');
                    var idx2 = classes[2].replace('index2', '');
                    var idx3 = classes[3].replace('index3', '');
                    var idx4 = classes[4].replace('index4', '');

                    if ($("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).is(":visible")) {
                        $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).hide();
                        $(this).show();
                    }

                    else {
                        $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3 + ".index4" + idx4).show();
                        $(this).show();
                    }
                }
                else if (group.indexOf('group3') >= 0) {
                    var classes = group.toString().split(' ');
                    var idx1 = classes[1].replace('index1', '');
                    var idx2 = classes[2].replace('index2', '');
                    var idx3 = classes[3].replace('index3', '');

                    if ($("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).is(":visible")) {
                        $("td.group3.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                        $("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                        $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).hide();
                        $(this).show();
                    }

                    else {
                        $("td.group3.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                        $("td.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                        $("tr.group4.index1" + idx1 + ".index2" + idx2 + ".index3" + idx3).show();
                        $(this).show();
                    }
                }
                else if (group.indexOf('group2') >= 0) {
                    var classes = group.toString().split(' ');
                    var idx1 = classes[1].replace('index1', '');
                    var idx2 = classes[2].replace('index2', '');

                    if ($("td.group3.index1" + idx1 + ".index2" + idx2).is(":visible")) {
                        $("td.group2.index1" + idx1 + ".index2" + idx2).hide();
                        $("td.group3.index1" + idx1 + ".index2" + idx2).hide();
                        $("td.group4.index1" + idx1 + ".index2" + idx2).hide();
                        $("tr.group4.index1" + idx1 + ".index2" + idx2).hide();
                        $(this).show();
                    }

                    else {
                        $("td.group2.index1" + idx1 + ".index2" + idx2).show();
                        $("td.group3.index1" + idx1 + ".index2" + idx2).show();
                        $("td.group4.index1" + idx1 + ".index2" + idx2).show();
                        $("tr.group4.index1" + idx1 + ".index2" + idx2).show();
                        $(this).show();
                    }
                }
                else if (group.indexOf('group') >= 0) {
                    var classes = group.toString().split(' ');
                    var idx1 = classes[1].replace('index1', '');

                    if ($("td.group2.index1" + idx1).is(":visible")) {
                        $("td.group.index1" + idx1).hide();
                        $("td.group2.index1" + idx1).hide();
                        $("td.group3.index1" + idx1).hide();
                        $("td.group4.index1" + idx1).hide();
                        $("tr.group4.index1" + idx1).hide();
                        $(this).show();
                    }

                    else {
                        $("td.group.index1" + idx1).show();
                        $("td.group2.index1" + idx1).show();
                        $("td.group3.index1" + idx1).show();
                        $("td.group4.index1" + idx1).show();
                        $("tr.group4.index1" + idx1).show();
                        $(this).show();
                    }
                }
            });

            $('#KPITable tbody td img.imagetree').live('click', function () {
                var nTr = $(this).parents('tr')[0];

                var rowIndex = oTable.fnGetPosition($(this).parents('tr')[0]);
                var aData = oTable.fnGetData(rowIndex);
                var ParentID = aData.ID.toString().replace("<a href=\"#\" onclick=\"OnAssignment('", "").replace("')\">Assign</a>", "");
                //ParentID = aData.ID.toString().replace("'", "");
                //ParentID = aData.ID.toString().replace("'", "");

                //')">Assignment</a>
                TableHtml = $("#TempTable").html(); ;
                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    this.src = "../images/plus.gif";
                    oTable.fnClose(nTr);
                }
                else {
                    /* Open this row */
                    this.src = "../images/minus.gif";
                    oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'Expand');
                    oInnerTable = $("#KPITable_" + iTableCounter).dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "sSearch": false,
                        "bPaginate": true,
                        "bAutoWidth": false,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/KPIChildExpandSerializer.ashx?User=" + $("#txt_user").val() + "&KPIParent=" + ParentID,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [{
                            "mData": "No"
                        }, {
                            "mData": "Description"
                        },



                        {
                            "mData": "GroupKPI"
                        }, {
                            "mData": "CategoryKPI"
                        }, {
                            "mData": "TypeKPI"
                        }, {
                            "mData": "SubTypeKPI"
                        }, {
                            "mData": "Periode"
                        },
                        {
                            "mData": "Weight"
                        },

                        {
                            "mData": "UoMMax"
                        },
                        {
                            "mData": "UoMMin"
                        },
                         {
                             "mData": "isActive"
                         }

                        ],
                        "aoColumnDefs": [{
                            "fnRender": function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                } else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }, {
                            "sClass": "center",
                            "aTargets": [0, 2, 7, 8]
                        },


                     {
                         "bVisible": false,
                         "aTargets": [3, 4, 5, 6]
                     }

                        ]
                    });
                    iTableCounter = iTableCounter + 1;
                }
            });


            OnDetail = function (code) {
                LoadForm('KPIAddForm.aspx?ID=' + code, function (result) {
                    $("#divdetail").html(result);
                    $("#divdetail").dialog('open');
                });
                return false;
            }

            OnDelete = function (code) {
                $.msgBox.confirm("Benar data akan dihapus ?", function () {
                    var param = "?";
                    param = param + "action=delete";
                    param = param + "&ID=" + code;
                    param = param + "&CurrUser=" + $("#txt_user").val();
                    ProcessRequest("KPIHandler.ashx" + param, "#divdetail", "#KPITable");
                    return false;
                }, false);

                return false;
            }

            OnAssignment = function (code) {
                LoadForm('AssignmentKPI.aspx?ID=' + code + "&CurrUser=" + $("#txt_user").val(), function (result) {
                    $("#divdetailAssign").html(result);
                    $("#divdetailAssign").dialog('open');
                    //alert(code);
                });
                return false;
            }

            OnMethod = function (code, periode) {
                LoadForm('MethodKPI.aspx?KpiId=' + code + "&periode=" + periode, function (result) {
                    $("#divdetailMethod").html(result);
                    $("#divdetailMethod").dialog('open');
                    //alert(code);
                });
                return false;
            }

            ImportExcel = function (mode) {
                var left = (screen.width / 2) - (500 / 2);
                var top = (screen.height / 2) - (200 / 2);
                var targetWin = window.open("../Tools/ImportExcel/ImportExcel.aspx?mode=" + mode + "&User=" + $("#txt_user").val(), "myPop1", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + 500 + ', height=' + 200 + ', top=' + top + ', left=' + left)

                //<a onclick="PopupCenter('http://www.nigraphic.com', 'myPop1',400,400);" href="javascript:void(0);">CLICK TO OPEN POPUP</a>
            }

            ImportExcel2 = function (mode) {
                var winFeature = "dialogHeight:200;dialogWidth:500;center:yes;resizeable:no;scroll:yes";
                window.showModalDialog("../Tools/ImportExcel/ImportExcel.aspx?mode=" + mode + "&User=" + $("#txt_user").val(), null, winFeature);
            }

            GetList = function (value) {
                if (value.length > 0) {
                    var xx = '0123456789';
                    if (xx.indexOf(value[value.length - 1]) < 0) {
                        $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                    }

                    if (value.length == 4) {
                        oTable.fnDraw();
                    }
                }
                else
                { oTable.fnDraw(); }
            }
        });

        function fnFormatDetails(table_id, html) {
            var sOut = "<table cellpadding=\"0\" cellspacing=\"0\" class=\"ExpandTable\" id=\"KPITable_" + table_id + "\">";
            sOut += html;
            sOut += "</table>";
            return sOut;
        }
    </script>
    <style>
        .Expand .fg-toolbar
        {
            display: none;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="kpitable">
        <div>
            <div class="customPageHeader">
                <span class="customPageTitle">Set KPI</span>
            </div>
            <div class="ui-widget-content">
                <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th>
                                Action
                            </th>
                            <th>
                            </th>
                            <th>
                                No
                            </th>
                            <th>
                                KPI Description
                            </th>
                            <th>
                                Group
                            </th>
                            <th>
                                Category
                            </th>
                            <th>
                                Type
                            </th>
                            <th>
                                Sub Type
                            </th>
                            <th>
                                Periode
                            </th>
                            <th>
                                Method
                            </th>
                            <th>
                                MethodID
                            </th>
                            <th>
                                Weight
                            </th>
                            <th>
                                UoM Max.
                            </th>
                            <th>
                                UoM Min.
                            </th>
                            <th>
                                Status
                            </th>
                            <th>
                                is Active
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
    </div>
    <div id="divdetail">
    </div>
    <div id="divdetailMethod">
    </div>
    <div id="divdetailAssign">
    </div>
    <div id="divTemp" style="display: none">
        <table id="TempTable">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        KPI Description
                    </th>
                    <th>
                        Group
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Type
                    </th>
                    <th>
                        Sub Type
                    </th>
                    <th>
                        Periode
                    </th>
                    <th>
                        Weight
                    </th>
                    <th>
                        UoM Max.
                    </th>
                    <th>
                        UoM Min.
                    </th>
                    <th>
                        is Active
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</asp:Content>